<template>
  <div class="box3">
    <h1>咪咪信息</h1>
    <h3>咪咪名称:{{name}}</h3>
     <h3>咪咪年龄:{{age}}</h3> 
     <img :src=img alt="" class='i1'><br>
    <button @click="shwoCat" class="btn">点击查看信息</button>
  </div>
</template>

<script>
  export default {
    name:'Cat',
    data() {
      return {
        name:"大橘",
        age:3,
        img:'https://img.zcool.cn/community/0141ae597b6c74a8012193a3d534ca.jpg@1280w_1l_2o_100sh.jpg'  
      }
    },
    methods: {
      shwoCat(){
        alert(`我叫大橘子,我${this.age} 岁大了 ,看我可爱吧!`)
      }
    },
  }
</script>

<style scoped>
  .i1{
    width: 280px;
      box-shadow: 0 0 30px rgb(221, 10, 101);

  }
  .box3{
    background-color: darkcyan;
    padding: 10px;
    box-shadow: 0 0 10px;
  }
  .btn{
    background-color: darkgoldenrod;
    box-shadow: 0 0 30px chartreuse;
    font-size: 23px;
  }
</style>